<template>
  <div class="app-container">
    <el-dialog title="新增/编辑"
               :close-on-click-modal=false
               :visible.sync="dialogVisible">
      <el-form ref="form"
               :model="form"
               :rules="formRules"
               v-loading="formLoading">
        <el-form-item label="标题"
                      prop="Title"
                      :label-width="formLabelWidth">
          <el-input v-model="form.Title"></el-input>
        </el-form-item>
        <el-form-item label="图标"
                      prop="Icon"
                      :label-width="formLabelWidth">
          <el-input v-model="form.Icon"></el-input>
        </el-form-item>
        <el-form-item label="路由"
                      prop="Route"
                      :label-width="formLabelWidth">
          <el-input v-model="form.Route"></el-input>
        </el-form-item>
        <el-form-item label="视图"
                      prop="View"
                      :label-width="formLabelWidth">
          <el-input v-model="form.View"></el-input>
        </el-form-item>
        <el-form-item label="是否可见"
                      prop="IsVisible"
                      :label-width="formLabelWidth">
          <el-switch v-model="form.IsVisible"
                     active-color="#13ce66"
                     inactive-color="#cecbcb">
          </el-switch>
        </el-form-item>
        <el-form-item label="排序"
                      prop="Sort"
                      :label-width="formLabelWidth">
          <el-input-number v-model="form.Sort"
                           size="small"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   :loading="formLoading"
                   @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { load, update } from '@/api/sys/menu'

export default {
  name: 'update-dialog',
  data () {
    return {
      loading: false,
      formLabelWidth: '120px',
      dialogVisible: false,
      formLoading: true,
      form: {
        Id: 0,
        ParentId: 0,
        Title: '',
        Icon: '',
        Route: '',
        View: '',
        Api: '',
        IsVisible: true,
        Sort: 1
      },
      formRules: {
        // Username: [{ required: true, message: '用户名是必须的', trigger: 'blur' }]
      }
    }
  },
  created () { },
  updated () { },
  methods: {
    submit () {
      let form = this.form
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true
          update(form).then(response => {
            // 更新父列表
            this.$parent.getList()
            // 成功消息
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.dialogVisible = false
          })
        } else {
          return false;
        }
      });
    },
    openNew (parentId) {
      let that = this
      that.dialogVisible = true
      that.formLoading = true
      Object.assign(this.$data.form, this.$options.data().form)
      that.form.ParentId = parentId
      that.formLoading = false
    },
    openEdit (id) {
      let that = this
      that.dialogVisible = true
      that.formLoading = true
      load(id).then(response => {
        var data = response.Data
        that.form = data
        that.formLoading = false
      })
    },
    close () {
      this.dialogVisible = false
    }
  }
}
</script>
